<template>
  <div>
    <myheader></myheader>
    <br><br>
    <!-- 面包屑导航 -->
    <Breadcrumb :datas='datas'></Breadcrumb>
    <br><br>
    <br><br>
    <el-table
      :data="tableData"
      height="250"
      border
      style="width: 100%">
      <el-table-column prop="title" label="活动名称" width="180"></el-table-column>
      <el-table-column prop="link" label="跳转地址" width="180"></el-table-column>
      <el-table-column prop="image" label="样图展示">
        <el-image
          style="width: 100px; height: 100px"
          :src="image">
        </el-image>

      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <el-button type="text" size="small" @click="add">添加</el-button>
        <el-button type="text" size="small" @click="update">修改</el-button>
        <el-button type="text" size="small" @click="del">删除</el-button>
        <el-button type="danger" @click="$refs.editable.removeSelecteds()">删除选中</el-button>
      </el-table-column>
    </el-table>


    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br><br>
    <myfooter></myfooter>

  </div>
</template>


<script>
  import myheader from './myheader.vue';
  import myfooter from './myfooter.vue';
  import axios from 'axios';
  import {config} from '../config.js'

  export default {
    name: 'myprofie',
    data() {
      return {
        //声明面包屑变量
        datas: [{title: '首页', route: {name: 'index'}}, {title: '活动页面'}],
        tableData: [{}],
        image: '',
      }
    },
    //注册组件标签
    components: {
      'myheader': myheader,
      'myfooter': myfooter,
    },
    methods: {
      //请求django后台，获取所有活动数据进行展示
      get_data() {
        axios.get('http://127.0.0.1:8000/getdata/').then(res => {
          console.log(res.data)
          this.tableData = res.data.list
          this.image = res.data.image
        })
      },
      //添加活动
      add() {
        this.$router.push('add_pics');
      },
      del() {
        let data = new FormData();
        data.append('title', title);
        axios.post('http://127.0.0.1:8000/delpics/', data).then(res => {
          console.log(res.data)
          this.$Message(res.data.message)
        })

      },
      update() {
        this.$router.push('updatepics');
      },
      removeEvent(row, index) {
        MessageBox.confirm('确定删除该数据?', '温馨提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$refs.editable.removeRow(index)
        }).catch(e => e)
      }
    },
    mounted() {
      this.get_data();
    },
  }
</script>
